<template>
  <div class="bx">
    <div class="ce">
      <el-col :span="12" :width="isshow?'65px':'270px'">
        <div class="ddd">
         <img style="width:40px" src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png" alt="">
         <span style="color:#ffff">imooc-admin</span>
      </div>
      <span @click="isshow=!isshow"></span>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        style="width:270px;"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="0">
          <template #title>
            <el-icon><location /></el-icon>
            <span @click="$router.push('/profile')">个人中心</span>
          </template>
          </el-sub-menu>
          <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span @click="$router.push('/chart')">数据可视化</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </template>
          </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户</span>
          </template>
          <el-menu-item index="4">
          <el-icon><icon-menu /></el-icon>
          <span @click="$router.push('/manage')">员工管理</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon><icon-menu /></el-icon>
          <span @click="$router.push('/role')">角色列表</span>
        </el-menu-item>
        <el-menu-item index="6">
          <el-icon><icon-menu /></el-icon>
          <span @click="$router.push('/permission')">权限列表</span>
        </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
    </div>
     <div class="xx">
       <div class="x1">
          <div style="float:left">
            &nbsp;&nbsp;<span >|||</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span >个人中心</span>
          </div>
          <div class="xc" >
            <div class="qp"><el-icon :size="size" :color="color"><Edit /></el-icon></div>
            <div class="qp"><Search style="width: 1em; height: 1em; margin-right: 8px" />
             <div class="globalization">
                 <lang-select class="lang-select" effect="light"></lang-select>
                    </div></div>
            <div class="qp" @click="toggleFullscreen"><FullScreen style="width: 1em; height: 1em; margin-right: 8px" />
             
            
            </div>
            <div class="qp"><el-dropdown>
              <span class="el-dropdown-link">
              <FullScreen style="width: 1em; height: 1em; margin-right: 8px" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>主题换色</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown></div>
            <el-dropdown>
              <span class="el-dropdown-link">
                <img style="width:40px" src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png" alt="">
                <el-icon class="el-icon--right">  
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/profile')">首页</el-dropdown-item>
                  <el-dropdown-item><a class="a1" href="https://coding.imooc.com/class/542.html">课程主页</a></el-dropdown-item>
                  <el-dropdown-item @click="tc">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          </div>
          <div class="llll">
            <ul style="list-style: none;">
              <li style="float:left;  margin-left: 5px;" v-for="(ele,i) in tabslist" 
              :key="i"
              :class="ele.flag? 'select':''" 
              @click="gotabs(ele.path)"
               >
              <span class="spot" v-if="ele.flag"></span>
              {{ele.name}}
              <el-icon v-if="!ele.flag" @click.stop='deltabs(i)'>
                <CircleClose/>
              </el-icon>
              </li>
            </ul>
          </div>
          <div class="x2"><router-view /></div>
       </div>
        
  </div>
    

</template>

<script setup >
import { ref,reactive,computed,toRefs, onMounted,defineProps,defineEmits,getCurrentInstance,} from 'vue' 
import { useRouter,useRoute } from 'vue-router';
import { useStore } from 'vuex';
import langSelect from "@/components/lang.vue"
import { getUser } from "@/http/api.js";
import screenfull from 'screenfull';
function toggleFullscreen() {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
}
const data=reactive({
  isshow:false
})

onMounted(()=>{
   getUser();
   tabslist.value=store.state.vuextabslist;
})

const userList= async () => {
  let res = await getUser()
  console.log('获取用户信息成功',res);
}
const go=useRouter()
const store=useStore()
const tabslist=ref([]);
const router = useRouter();
const tc=()=>{
  localStorage.removeItem('store');
  go.push('/login')
}


const deltabs=(i)=>{
  store.commit('vuexdeltabs', i);
}
const gotabs=async(path)=>{
  router.push(path)
}

</script>

<style  scoped lang="scss">

.bx{
  overflow: hidden;
  display: flex;
}
.tabs{
  width: 100%;
  margin-top: 10px;
  text-align:left;
}
.llll{
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
  padding: 6px 20px;
  li{
    margin-left: 8px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: #495060;
    padding: 0 16px;
    border: 1px solid #d8dce5;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .spot{
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      margin-right: 6px;
    }
    .el-icon{
      font-size: 15px;
      margin-left: 6px;
    }
  }

}


.xc{
  float: right;
  width: 500px;
  display: flex;
  flex: 6;
  .qp{
    margin: 10px 45px;
  }
}
.ce{
  flex: 1;
  width: 270px;
  height: 1500px;
  background: #545c64;
  float: left;
}
.ddd{
  display: flex;
  justify-content: space-between;
  .span{
   line-height: 12px;
  }
}
.a1{
  text-decoration:none;
}
.xx{
  flex: 4;
  float: right;
  height: 1500px;
}
.x1{
   height: 30px;
}
.x2{
    margin-top: 20px;
    float: left;
    width: 1000px;
   
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>